<template>
    <div class="exchange-page">
        <!-- <back :back="false" title="兑换广场" bgcolor="linear-gradient(to right , #3b79e7, #3563db)" style="border:0;color:#fff"></back> -->
        <div class="exchange-content">
            <div  class="development">
				<span @click="$router.push('/transfer')"><i class="iconfont icon-zhuanzhang"></i>转账</span>
                <span @click="devt"><i class="iconfont icon-tiaoxingma"></i>付钱</span>
                <span @click="devt"><i class="iconfont icon-wuliaoguanlishouqianmadituiwuliao-copy"></i>收钱</span>
                <span class="shop_address" @click="$router.push('/shop')"><i class="iconfont icon-didian"></i>网点</span>
            </div>
            <div class="home-scroll-title">
                <i class="iconfont icon-shengyin"></i>
                <div class="scroll_box" id="home_scroll_div">
                    <ul class="music-intro" id="home_scroll_begin">
                        <li v-for="(it,i) in Notice" :key="i">{{it}}</li>
                    </ul>
                    <ul class="music-intro" id="home_scroll_end"></ul>
                </div>
            </div>
            <cube-tab-bar  v-model="selectedLabel" show-slider @change="change">
                <cube-tab v-for="(item, index) in tabs" :label="item.label" :key="index">
                </cube-tab>
            </cube-tab-bar>
            <cube-tab-panels v-model="selectedLabel">
                <cube-tab-panel v-for="(item, index) in tabs" :label="item.label" :key="index">
                    <nodata v-if="item.list.length < 1" title="暂无订单发布"></nodata>
                        <scroll v-else :forceUpdate="forceUpdate" @onPullingDown="onPullingDown">
                            <ul class="exchange-ul">
                                <li class="tab-panel-li" v-for="(it, i) in item.list" :key="i">
                                    <div class="title">
										{{item.label.replace('现金(RMB)','')}}：
										<span>{{toThousands(Number(it.money_num))}}</span>
										<!-- <i>{{it.money_type}}</i> -->
									</div>
									<div class="times">发布时间:{{it.create_time}}</div>
									<div class="times">交易时间:{{it.trans_pre_time|| '不限'}}</div>
                                    <div class="acpbtn">
                                        <span class="status" @click="modify(item.list,it)">接单</span>
                                    </div>
                                </li>
                            </ul>
                        </scroll>
                    <more v-if="OrderPool && OrderPool.Orders.length > 19" @click.native="morefn"></more>
                </cube-tab-panel>
            </cube-tab-panels>
        </div>
        <!--接单-->
        <div class="modify-tpl" v-if="modifymodal">
            <div class="modify-box">
                <div class="title">接单<span class="close iconfont icon-guanbi" @click="modifymodal = false"></span></div>
                <div class="modify-contrl">
                    <div class="modify-item">
                        <span>接单金额:</span>
                        <p><input type="text" v-model.trim="chai_money" @input="changeVal" :placeholder="placeholder"></p>
                    </div>
                    <div class="modify-money">接单需要支付的手续费金额:{{cardneedMoney || '0.00'}}RMB</div>
                    <div class="modify-card" @click="actionShow">抵扣卷<span>{{juan_text}}</span><i class="iconfont icon-gengduo"></i></div>
                    <div class="modify-item">
                        <button type="button" class="modify-submit" :class="{disabled:disabled}" :disabled="disabled"  @click="modifySub">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--抵扣卷-->
        <div class="ActionSheet" @click.self="actionHide" v-show="ActionSheetshow">
            <div class="ActionSheet-content" :class="{show:showlist}">
                <div class="title">抵扣卷<span class="close  iconfont icon-guanbi" @click="actionHide"></span></div>
                <div class="Card-list">
                    <nodata v-if="cardlist.length < 1" title="暂无未使用的抵扣卷"></nodata>
                    <div class="item" v-for="(item,index) in cardlist" :key="index">
                        <div class="left">
                            <strong>¥{{item.card_value}}</strong>
                            <p>手续费满{{parseInt(item.card_use_min_money)}}可用</p>
                        </div>
                        <div class="right">
                            <div class="name">{{item.card_type}}</div>
                            <div class="time">{{item.create_time}} - {{item.expired_time || '永久'}}</div>
                            <button type="button" class="useing" :class="{cheked:cardNo == item.card_no}" v-if="needMoney > parseInt(item.card_use_min_money)"  @click="selected(item)"></button>
                            <button type="button" class="nouse" v-else>不可用</button>
                        </div>
                    </div>
                    <more v-if="cardmore > 19" @click.native="mycards"></more>
                </div>
                <button type="button" class="submitcard" :class="{active:cardNo}" :disabled="!cardNo" @click="actionHide">确定</button>
            </div>
        </div>

    </div>
</template>

<style lang="stylus">
.exchange-page{
    width 100%
    height calc(100% - 50px) !important
    position relative
    .exchange-content{
        height 100%
        .development{
            width 100%
            display flex
            background: #3d81cb
            padding-top 40px
            padding-bottom 20px
            span{
                flex 1
                font-size 16px
                text-align center
                color #fff
                i{
                    display block
                    margin-bottom 8px
                    font-size 22px
                }
            }
        }
        .home-scroll-title{
            background #fcf8ec
            color #d69800
            font-size 12px
            width 100%
            height:30px;
            display flex
            align-items:center;
            position relative
            border-bottom 1px solid #ffe8a3
            .iconfont{
                width 20px
                line-height 25px
                background #fcf8ec
            }
            .scroll_box{
                width: calc(100% - 20px);
                height:30px;
                overflow hidden
                display flex
                align-items center
            }
            ul{
                list-style none 
                height:100%;
                display:flex;
                align-items:center;
                li{
                    white-space nowrap
                    padding 0 10px
                    line-height 25px
                    min-width 355px
                }
            }
        }
        .cube-tab-bar{
            height 50px
            font-size 16px
            background-image: linear-gradient(to bottom, #f6f6f6 ,#fcfcfc)
            border-bottom 1px solid #e7e7e7
            .cube-tab{
                color #333
                font-weight 600
                width 100px
            }
            .cube-tab_active{
                color #1359b6
            }
            .cube-tab-bar-slider{
                background-color #f02c2c
                bottom -1px
            }
        }
        .cube-tab-panels{
            height calc(100% - 185px) !important
        }
        .cube-tab-panels-group{
            height 100%
        }
        .exchange-ul{
            padding 0 10px
            .tab-panel-li{
                position relative
                padding 10px 0
                border-bottom 1px solid #f4f4f4
                .title{
                    font-size 16px
                    margin-bottom 10px
                    span{
                        font-weight 600
                        color #f02d2d
                    }
                    i{
                        font-size 12px
                        font-style normal
                    }
                }
                .times{
                    font-size 12px
                    color #888
					line-height:20px;
                }
                .acpbtn{
                    display flex
                    position absolute
                    top 20px
                    right 0px
                    span{
                        font-size 12px
                        color #fff
                        font-weight 600
                        background #eee
                        padding:0 15px
                        text-align center
                        height 25px
                        line-height 25px
                        border-radius 50px
                    }
                    .status{
                        background-image: linear-gradient(to bottom, #3d81cb, #3696ff)
                    }
                    .chai_status{
                        background-image: linear-gradient(to bottom, #3d81cb, #3696ff)
                    }
                }
                &:last-child{
                    border-bottom 0
                }
            }
        }
    }
    .home-contrl{
        position absolute
        top 50%
        right 5px
        background rgba(0,0,0,0.5)
        border-radius 5px
        box-shadow 0 0 5px #585858
        width 60px
        height 60px
        display flex
        align-items center
        justify-content center
        .tool{
            display block
            text-align center
            i{
                font-size 30px
                color #cbcbcb
            }
            p{
                font-size 12px
                color #cbcbcb
            }
        }
    }
    .modify-tpl{
        width 100%
        height 100%
        position absolute
        top 0
        left 0
        background rgba(0,0,0,0.5)
        display flex
        align-items center
        justify-content center
        .modify-box{
            width 300px
            background #fff
            border-radius 5px
            overflow hidden
            box-shadow 0 0 5px #2d2d2d
            .title{
                text-align center
                background linear-gradient(to bottom, #48b5e4, #3555db)
                height 50px
                line-height 50px
                font-size 18px
                color #fff
                position relative
                border-radius 5px 5px 0 0
                .close{
                    position absolute
                    top 0px
                    right 10px
                    width 40px
                    color #585858
                }
            }
            .modify-contrl{
                padding 10px
                .modify-money{
                    font-size 12px
                    color #db3535
                    margin-bottom 10px
                }
                .modify-item{
                    display flex
                    align-items center
                    height 50px
                    margin-bottom 20px
                    span{
                        min-width 70px
                        font-size 16px
                    }
                    p{
                        width 100%
                        font-size 14px
                        border 1px solid #ddd
                        padding 6px  10px
                        border-radius 5px
                        input {
                            height 30px
                            line-height 30px
                            width 100%
                        }
                    }
                    .modify-submit{
                        width 100px
                        height 40px
                        margin 0 auto
                        background linear-gradient(to bottom, #e49348, #db3535)
                        color #fff
                        border-radius 5px
                        font-size 16px
                        &.disabled{
                            background linear-gradient(to bottom, #b5b5b5, #6a6a6a)
                        }
                    }
                    &:last-child{
                        margin-bottom 0
                    }
                }
                .modify-card{
                    font-size 12px
                    display flex
                    align-items center
                    margin-bottom 15px
                    span{
                        flex 2
                        text-align right
                        color #3764dc
                    }
                    i{
                        font-size 24px
                    }
                }
            }
        }
    }
    .ActionSheet{
        width 100%
        height 100%
        position absolute
        top 0
        left 0
        z-index 2
        background rgba(0,0,0,0.5)
        overflow hidden
        .ActionSheet-content{
            width 100%
            height 80%
            background #f1f1f1
            position absolute
            bottom 0
            left 0
            border-radius 10px 10px 0 0
            transform translateY(100%)
            transition transform 0.3s linear
            overflow hidden
            &.show{
                transform translateY(0);
            }
            .title{
                font-size 16px
                color #000
                padding 0 10px
                height 50px
                line-height 50px
                background #fff
                position relative
                .close{
                    position absolute
                    top 0px
                    right 10px
                    font-size 15px
                    color #999
                }
            }
            .Card-list{
                height calc(100% - 100px)
                overflow-y auto
                padding 10px
                .item{
                    display flex
                    background #fff
                    margin-bottom 10px
                    .left{
                        min-width 120px
                        padding 20px 0
                        background linear-gradient(to right, #4892e4, #3555db)
                        color #fff
                        text-align center
                        strong{
                            font-size 30px
                        }
                        p{
                            font-size 12px
                            width 100%
                        }
                    }
                    .right{
                        padding 10px
                        position relative
                        flex 2
                        .name{
                            font-size 14px
                            color #000
                            margin-bottom 15px
                        }
                        .time{
                            font-size 12px
                            color #555
                        }
                        .useing{
                            width 20px
                            height 20px
                            color #ffffff
                            border 1px solid #ddd
                            outline none
                            position absolute
                            top 30px
                            right 10px
                            border-radius 50px
                            font-size 12px
                            &.cheked{
                                background linear-gradient(to bottom, #4892e4, #3555db)
                                border-color #3555db
                            }
                        }
                        nouse{
                            width 50px
                            height 25px
                            color #ffffff
                            border 0
                            outline none
                            position absolute
                            top 30px
                            right 10px
                            font-size 12px
                            background #ccc
                            border-radius 0
                        }
                    }
                }
            }
            .submitcard{
                width 90%
                height 40px
                background #ccc
                color #fff
                display block
                margin 0 auto 
                font-size 14px
                border-radius 5px
                &.active{
                    background linear-gradient(to right, #4892e4, #3555db)
                }
            }
        }
    }
}
</style>

<script>
import {mapGetters} from 'vuex'
export default {
    data () {
        return {
            selectedLabel: '收购现金(RMB)',
            tabs: [{
                label: '收购现金(RMB)',
                list: []
            }, {
                label: '出售现金(RMB)',
                list: []
            }],
            OrderPool:'',
            mpage:1,
            bypage:1,
            page:0,
            forceUpdate:false,
            chai_money:'',//拆单金额
            modifymodal:false,
            tabslist:[],
            modifyData:'',
            needMoney:'',
            cardneedMoney:'',
            disabled:true,
            placeholder:'',
            Notice:'',
            ActionSheetshow:false,
            showlist:false,//动画显示抵扣卷列表
            cardlist:[],
            cardmore:0,
            cardNo:'',
            juan_text:'使用抵扣券',
        }
    },
    created(){
        this.getOrderPool('0',this.bypage);
        this.mycards()
    },
    computed:{
        ...mapGetters([
            'getNotice'
        ])
    },
    mounted(){
        this.noticefn();
        if(this.getNotice != 1){
            this.$store.commit('setNotice',1)
            this.getWindow();
        }
    },
    methods:{
        getWindow(){//公告
            this.$http.get(`/About/getWindow`).then( res => {
                console.log(res)
                if(res.code == 200 && res.data && !Array.isArray(res.data)){
                    this.$createDialog({
                        type: 'alert',
                        title: res.data.title,
                        content: res.data.content.replace(/\n/g,'<br/>'),
                        confirmBtn: {
                            text: '我知道了',
                            active: true
                        }
                    }).show()
                }
            })
        },
		toThousands(num) {
			var num = (num || 0).toString(), re = /\d{3}$/, result = '';
			while ( re.test(num) ) {
				result = RegExp.lastMatch + result;
				if (num !== RegExp.lastMatch) {
					result = ',' + result;
					num = RegExp.leftContext;
				} else {
					num = '';
					break;
				}
			}
			if (num) { result = num + result; }
			return result;
		},
        actionShow(){
            setTimeout( () => {
                this.showlist = true
            },10)
            this.ActionSheetshow = true
        },  
        actionHide(){//隐藏抵扣卷
            this.showlist = false
            setTimeout( () => {
                this.ActionSheetshow = false
            },300)
        },
        selected(item){
            if(this.cardNo == item.card_no){
                this.cardNo = ''
                this.juan_text = `使用抵扣券`
                this.cardneedMoney = this.needMoney
            }else{
                this.cardNo = item.card_no
                this.juan_text = `抵扣¥${item.card_value}`
                this.cardneedMoney = Number(this.needMoney) - Number(item.card_value)
            }
        },
        mycards(type){
            let toast = this.$createToast({
                time: 0,
                txt: '加载中...'
            }).show()
            this.page ++ 
            this.$http.get(`/MyInfo/myCards`,{
                page:this.page,
                status:'new'
            }).then( res =>{
                console.log(res)
                toast.hide()
                if(res.code == 200){
                    let list = res.data.Cards
                    this.cardlist = this.cardlist.concat(list)
                    this.cardmore = list.length
                }
            })
        },
        devt(){
            this.$createDialog({
                type: 'alert',
                title:'该功能正在开发中...',
                confirmBtn: {
                    text: '我知道了',
                    active: true
                }
            }).show()
        },
        changeVal(){
            this.needMoney = ''
            if(!this.chai_money){
                this.placeholder = `默认接单${this.toThousands(this.modifyData.money_num)}`
            }
            this.getFeeForOrder()
        },
        modify(list,data){
            this.modifymodal = true;
            this.tabslist = list
            this.modifyData = data
            this.chai_money = this.toThousands(data.money_num)
            this.getFeeForOrder()
        },
        getFeeForOrder(){
            this.disabled = true;
            let toast = this.$createToast({
                time: 0,
                txt: '计算手续费中...'
            }).show()
            toast.show()
			let chai_m = this.chai_money.replace(/\,/g, "");
			this.chai_money = this.toThousands(chai_m)
			if(this.chai_money == '0'){
				this.chai_money = ''
			}
            this.$http.get(`/Orders/getFeeForOrder`,{
                orderId:this.modifyData.id,
                moneyNum:chai_m || this.modifyData.money_num
            }).then( res => {
                console.log(res)
                toast.hide();
                this.disabled = false;
                if(res.code == 200){
                    this.needMoney = res.data.needMoney
					this.cardneedMoney = this.needMoney
					console.log(this.cardneedMoney)
                    for(let i = 0;i < this.cardlist.length;i++){
                        let item = this.cardlist[i]
                        if(this.needMoney > item.card_use_min_money){
                            this.juan_text = '使用抵扣券'
                            break;
                        }else{
                            this.juan_text = '无可用抵扣券'
                        }
                    }
                }else{
                    this.createToast(res.msg,'error')
                }
            })
        },
        modifySub(){
            if(this.modifyData.money_num <= this.OrderPool.allowSplitMinMoney || this.chai_money == this.modifyData.money_num){
                this.acceptOrder(this.tabslist,this.modifyData)
				console.log(this.chai_money)
            }else{
				let chai_m = this.chai_money.replace(/\,/g, "");
                if(this.chai_money < this.OrderPool.splitMinMoney){
                    this.createToast(`接单金额不能低于${this.OrderPool.splitMinMoney}RMB`,'warn')
                    return;
                }   
                this.acceptOrder(this.tabslist,this.modifyData,chai_m)
            }
        },
        onPullingDown(){
            switch(this.selectedLabel){
                case '收购现金(RMB)':
                        this.tabs[0]['list'] = []
                        this.getOrderPool('0',1);
                break;
                case '出售现金(RMB)':
                        this.tabs[1]['list'] = []
                        this.getOrderPool('1',1);
                break;
            }
        },
        morefn(){
            switch(this.selectedLabel){
                case '收购现金(RMB)':
                        this.bypage ++
                        this.getOrderPool('0',this.bypage);
                break;
                case '出售现金(RMB)':
                        this.mpage ++
                        this.getOrderPool('1',this.mpage);
                break;
            }
        },
        getOrderPool(type,typepage){
            let toast = this.$createToast({
                time: 0,
                txt: '加载中...'
            }).show()
            this.$http.get(`/Orders/getOrderPool`,{
                orderType:type,
                page:typepage
            }).then( res => {
                console.log(res)
                toast.hide();
                if(res.code == 200){
                    this.OrderPool = res.data
                    if(type == '0'){
                        this.tabs[0]['list'] = this.tabs[0]['list'].concat(this.OrderPool.Orders)  
                    }else{
                        this.tabs[1]['list'] = this.tabs[1]['list'].concat(this.OrderPool.Orders)  
                    }
                    this.forceUpdate = true;
                }
            })
        },
        change(val){    
            switch(val){
                case '收购现金(RMB)':
                        this.tabs[0]['list'] = []
                        this.getOrderPool('0',1);
                        
                break;
                case '出售现金(RMB)':
                        this.tabs[1]['list'] = []
                        this.getOrderPool('1',1);
                        
                break;
            }
        },
        acceptOrder(obj,data,splitMoney){
            this.$http.get(`/Orders/acceptOrder`,{
                orderId:data.id,
                splitMoney:splitMoney,
                cardNo:this.cardNo,
            }).then( res => {
                console.log(res)
                if(res.code == 200){
                    obj.forEach( (item,index) => {
                        if(item.id == data.id){
                            if(splitMoney){
                                data.money_num = Number(data.money_num) - Number(splitMoney)
                            }else{
                                obj.splice(index,1)
                            }
                        }
                    })
                    this.createToast(res.msg,'correct')
                    setTimeout( () => {
                        this.$router.push('/order')
                    },1500)
                }else if(res.code == 400){
                    this.createToast(res.msg,'warn')
                    setTimeout( () => {
                        this.$router.push('/recharge')
                    },1500) 
                }else{
                    this.createToast(res.msg,'error')
                }
            })
        },
        noticefn(){
            this.$http.get(`/About/getNotice`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.Notice = res.data.concent
                    setTimeout( () => {
                        this.ScrollImgLeft();
                    },100)
                }
            })
        },
        ScrollImgLeft(){
            let speed=50;//初始化速度 也就是字体的整体滚动速度
            // let MyMar = null;//初始化一个变量为空 用来存放获取到的文本内容
            let scroll_begin = document.getElementById("home_scroll_begin");//获取滚动的开头id
            let scroll_end = document.getElementById("home_scroll_end");//获取滚动的结束id
            let scroll_div = document.getElementById("home_scroll_div");//获取整体的开头id
            scroll_end.innerHTML=scroll_begin.innerHTML;//滚动的是html内部的内容,原生知识!
            function Marquee(){
                if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
                    scroll_div.scrollLeft-=scroll_begin.offsetWidth;
                else
                    scroll_div.scrollLeft++;
            }
            
            clearInterval(this.MyMar)
            this.MyMar=setInterval(Marquee,speed);//给上面的方法设置时间  setInterval
        },
        createToast(txt,type){
            this.$createToast({
                txt: txt,
                time: 1500,
                type:type
            }).show()
        }
    },
    beforeDestroy(){
        clearInterval(this.MyMar)
    }
}
</script>
